<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>装卸面板</title>
    	<link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css"/>
		<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js"></script>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<style type="text/css">
			.gig-div{
				height: 1100px;
				width: 1600px;
				margin: auto;
				background-color: #ededee;
			}
			.margin{
				width: 96%;
				height: 100%;
				margin: auto;
			}
			.title-div{
				height: 10%;
				width: 100%;
				text-align: center;
				line-height: 94px;
			}
			.top-div{
				height: 5%;
				width: 100%;
			}
			.top-div-left{
				float: left;
				width: 35%;
				height: 100%;
				text-align: left;
				line-height: 47.5px;
				margin-left: 15px;
			}
			.top-div-right{
				float: right;
				width: 45%;
				height: 100%;
				text-align: right;
				line-height: 47.5px;
				margin-right: 15px;
			}
			.bable-div{
				height: 75%;
				width: 100%;
			}
			table{
				border-collapse: collapse;
				text-align: center;
				width: 100%;
				height: 100%;
			}
			table td, table th{
				border: 1.5px solid #666;
				color: #666;
			}
			.bottom-div{
				height: 10%;
				width: 100%;
			}
			.bottom-div-left{
				width: 47%;
				height: 40px;
				float: left;
				text-align: left;
				line-height: 40px;
				margin-left: 15px;
			}
			.bottom-div-right{
				width: 43%;
				height: 40px;
				float: right;
				text-align: right;
				line-height: 40px;
				margin-right: 15px;
			}
			.button-div{
				height: 50px;
				width: 650px;
				margin: auto;
				text-align: center;
				line-height: 50px;
			}
			.button-submit{
				display: inline-block;
				height: 38px;
				line-height: 38px;
				padding: 0 18px;
				background-color: #009688;
				color: #fff;
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
			}
			.return{
				border: 1.5px solid #bdbdbd;
				background-color: #fff;
				border-color: #e6e6e6;
				color: #666;
			}
			input{
				border: none;
				background-color: #ededee;
				color: #666;
				font-size: 15px;
			}
			.number-input{
				width: 80px;
				height: 15px;
			}
			.nodes{
				height: 25px;
				width: 400px;
			}
			.nodessize{
				color: #000000;
				font-size: 30px;
				font-weight: 600;
			}
		</style>
	</head>
	<body>
		<div class="layui-fluid">
		    <div class="layui-row layui-col-space15">
		        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
		            <div class="layui-card">
		                <div class="layui-card-body">
		                    <div class="layui-form toolbar">
		                        <div class="layui-form-item">
						            <div class="layui-inline">
						                <input id="arriveTime" class="layui-input" type="text" placeholder="日期"/>
						            </div>
						            <div class="layui-inline">
						                <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
						            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<div class="gig-div" id="printinghtml">
			<div class="margin">
				<div class="title-div"><span style="color: #000000;font-size: 50px;font-weight: 600;">山东先飞物流有限公司装卸面板</span></div>
				<div class="top-div">
					<div class="top-div-left"><span class="nodessize">日期：</span><span class="nodessize" id="c_arriveTime"></span></div>
					<div class="top-div-right"><span id=""></span></div>
				</div>
				<div class="bable-div">
					<table border="2px " cellspacing="" cellpadding="" id="bable-div-table">
						<!-- <tr>
							<th style="color: #000000;"></th>
							<th class="nodessize">装卸中车辆</th>
							<th class="nodessize">排队车辆</th>
						</tr>
						<tr>
							<td class="nodessize">月台P1</td>
							<td class="nodessize">2022092903 鲁a88887</td>
							<td class="nodessize">2022092902 鲁A88888</td>
						</tr>
						<tr>
							<td class="nodessize">月台P2</td>
							<td class="nodessize">2022092903 鲁a88887</td>
							<td class="nodessize">2022092902 鲁A88888</td>
						</tr>
						<tr>
							<td class="nodessize">月台P3</td>
							<td class="nodessize">2022092903 鲁a88887</td>
							<td class="nodessize">2022092902 鲁A88888</td>
						</tr> -->
					</table>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		layui.use(['laydate'], function(){
		    var laydate = layui.laydate;
	
		    //执行一个laydate实例
		    laydate.render({
		      elem: '#arriveTime' //指定元素
		       ,value:new Date()
		    });
		    
		    finddatalist();
		    
		    function finddatalist(){
				$("#c_arriveTime").html($("#arriveTime").val())
			    $.ajax({
					type: 'post',
					data: {arriveTime:$("#arriveTime").val()},
					url: "/makeRailwayPlatformManage/findDaping",
					dataType:"json",
					success: function (data) {
						var html = '<tr>'+
							'<th style="color: #000000;"></th>'+
							'<th class="nodessize">装卸中车辆</th>'+
							'<th class="nodessize">排队车辆</th>'+
						'</tr>';
						console.log(data.data)
						for(var i = 0; i <data.data.length; i++){
							html +='<tr>'+
								'<td class="nodessize">'+data.data[i].railwayPlatformName+'</td>';
								if(data.data[i].jinxingzhong != ""){
									html +='<td class="nodessize">'+data.data[i].jinxingzhong.v2+' '+data.data[i].jinxingzhong.carNumber+'</td>';
								} else {
									html +='<td class="nodessize"></td>';
								}
								if(data.data[i].paiduizhong != ""){
									html +='<td class="nodessize">'+data.data[i].paiduizhong.v2+' '+data.data[i].paiduizhong.carNumber+'</td>';
								} else {
									html +='<td class="nodessize"></td>';
								}
								html +='</tr>';
						}
						console.log(html)
						$("#bable-div-table").html(html)
					}
				});
		    }

		    // 搜索按钮点击事件
		    $('#btnSearch').click(function () {
		    	finddatalist();
		    });
		    
		    // 定时刷新    5分钟
		    var time = setInterval(function() {
		    	finddatalist();
	        }, 1000*60*5);
	    });
	</script>
</html>
